<template>
    <div class="classifyBox">
        <div class="topBox">
            <div class="font34 marB40 bold">已完成</div>
            <div class="font24">感谢您的光临，欢迎再来</div>
        </div>
        <div class="classifyList">
            <div class="filterList padTB40">
                <img src="../../public/static/img/indexBg.jpg" mode="aspectFill" class="photo">
                <div class="marL40 filterItem">
                    <div class="itemInfo">
                        <div class="font30 bold line15">套餐A</div>
                        <div class="font24 line15">x1</div>
                        <div class="font30">¥ 66</div>
                    </div>
                    <div class="font24 line15 itemspan" ><span class="num">3人</span>菜品名1*1+菜品名2*1+菜品名1*1+菜品名2*1+菜品名1*1+菜品名2*1+菜品...</div>
                    
                </div>
            </div>
            <div class="filterList padTB40">
                <img src="../../public/static/img/indexBg.jpg" mode="aspectFill" class="photo">
                <div class="marL40 filterItem">
                    <div class="itemInfo">
                        <div class="font30 bold line15">套餐A</div>
                        <div class="font24 line15">x1</div>
                        <div class="font30">¥ 66</div>
                    </div>
                    <div class="font24 line15 itemspan" ><span class="num">3人</span>菜品名1*1+菜品名2*1+菜品名1*1+菜品名2*1+菜品名1*1+菜品名2*1+菜品...</div>
                    
                </div>
            </div>
            <div class="filterList padTB40">
                <img src="../../public/static/img/indexBg.jpg" mode="aspectFill" class="photo">
                <div class="marL40 filterItem">
                    <div class="itemInfo">
                        <div class="font30 bold line15">套餐A</div>
                        <div class="font24 line15">x1</div>
                        <div class="font30">¥ 66</div>
                    </div>
                    <div class="font24 line15 itemspan" ><span class="num">3人</span>菜品名1*1+菜品名2*1+菜品名1*1+菜品名2*1+菜品名1*1+菜品名2*1+菜品...</div>
                    
                </div>
            </div>
            <div class="filterList padTB40">
                <img src="../../public/static/img/indexBg.jpg" mode="aspectFill" class="photo">
                <div class="marL40 filterItem">
                    <div class="itemInfo">
                        <div class="font30 bold line15">套餐A</div>
                        <div class="font24 line15">x1</div>
                        <div class="font30">¥ 66</div>
                    </div>
                    <div class="font24 line15 itemspan" ><span class="num">3人</span>菜品名1*1+菜品名2*1+菜品名1*1+菜品名2*1+菜品名1*1+菜品名2*1+菜品...</div>
                    
                </div>
            </div>
            <div class="filterList padT40">
                <div class="totalBox font30">
                    <span class="font24 color92 marR40">共4件</span>
                    <div class="line15" >总计：</div>
                    <div class="line15">&yen;200</div>
                </div>
            </div>
        </div>
        <div class="classifyList">
            <div class="filterList bold">
                <div class="totalBox font30">
                    <div class="line15" >已支付：</div>
                    <div class="line15">&yen;200</div>
                </div>
            </div>
        </div>
        <div class="classifyList">
            <div class="orderInfo font24 color92">
                <div class="infoName">订单编号：</div>
                <div class="">123456789</div>
            </div>
            <div class="orderInfo font24 color92">
                <div class="infoName">下单时间：</div>
                <div class="">2021-12-13 16:15:24</div>
            </div>
            <div class="orderInfo font24 color92">
                <div class="infoName">桌台名称：</div>
                <div class="">A03桌</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'OrderDetail',
    components:{
    },
    data(){
        return{
            
        }
    }
}
</script>
<style lang="scss" scoped>
    .classifyBox{
        .topBox{ padding: 5.3% 5.3% 20.3%; background-color: $mainColor;
            &+.classifyList{ margin: -15% 5.3% 5.3%;}
        }

        .classifyList{ margin: 5.3%; padding: 5.3%; background-color: #fff; border-radius: 0.3rem; box-sizing: border-box;
            .filterList{ position: relative; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap;  align-content: flex-start; -webkit-align-content: flex-start;
                .photo{ display: block; text-align: center; overflow: hidden; width: 3.5rem;  height: 3.5rem; border-radius: 0.3rem;}
                .filterItem{ flex: 1; display: flex; flex-direction: column; justify-content: space-between;
                    .itemspan{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;
                        .num{ background-color: #ffeca9; color: #feb329; border-radius: 5px;padding: 0 0.25rem; margin-right: 0.25rem;}
                    }
                    .itemInfo{ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between;}
                }
                &:first-child{ padding-top: 0;}
                &+.filterList:after{content: " "; position: absolute; left: 0.4rem; top: 0; right: 0.4rem; height: 1px; border-top: 1px solid #E5E5E5; color: #E5E5E5; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
            }
            .totalBox{ flex: 1; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: flex-end; -webkit-justify-content: flex-end; }
            .orderInfo{ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; line-height: 2;}
            .remarkBox{ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between;
                .remarkInput{
                    flex: 1; text-align: right; background: transparent; border: none; outline: none; color: #929292; line-height: normal;
                    &::-webkit-input-placeholder{ color: #929292;}
                }
            }
        }
        .replaceBottomBox{ position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; height: 2.75rem; line-height: 2.75rem; overflow: hidden; font-size: 0.7rem; background-color: #fff;
            .btn{ height: 2rem; line-height: 2rem; border-radius: 0.5rem; margin: 0 0.75rem;}
            .cancelBtn{ flex: 1; text-align: center; color: #333; margin-right: 0.375rem; border: 1px solid #333;}
            .surnBtn{ flex: 1; text-align: center; color: #333; margin-left: 0.375rem; background-image: linear-gradient(to right,$mainColor,#ffae44);}
        }
    }
</style>